<!DOCTYPE HTML>
<html lang="en" >
    
    <head>
        
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>第七节：flex布局 | 微信小程序</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.6.7">
        
        
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="../gitbook/style.css">
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-highlight/website.css">
        
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-search/search.css">
        
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-fontsettings/website.css">
        
    
    

        
    
    
    <link rel="next" href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-bajie-ff1a-app-sheng-ming-zhou-qi.html" />
    
    
    <link rel="prev" href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-liu-jie-ff1a-wxss-yu-fa.html" />
    

        
    </head>
    <body>
        
        
    <div class="book"
        data-level="2.6"
        data-chapter-title="第七节：flex布局"
        data-filepath="di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-qi-jie-ff1a-flex-bu-ju.md"
        data-basepath=".."
        data-revision="Tue Feb 12 2019 17:48:38 GMT+0800 (中国标准时间)"
        data-innerlanguage="">
    

<div class="book-summary">
    <nav role="navigation">
        <ul class="summary">
            
            
            
            

            

            
    
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="../index.html">
                
                        <i class="fa fa-check"></i>
                        
                        Introduction
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1" data-path="chapter1.html">
            
                
                    <a href="../chapter1.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.</b>
                        
                        第一章：小程序前奏
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.1" data-path="chapter1/di-yi-jie-ff1a-ren-shi-xiao-cheng-xu.html">
            
                
                    <a href="../chapter1/di-yi-jie-ff1a-ren-shi-xiao-cheng-xu.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.1.</b>
                        
                        第一节：认识小程序
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="chapter1/di-er-jie-ff1a-zhun-bei-gong-zuo.html">
            
                
                    <a href="../chapter1/di-er-jie-ff1a-zhun-bei-gong-zuo.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.2.</b>
                        
                        第二节：准备工作
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="chapter1/di-san-jie-ff1a-kai-fa-gong-ju-jie-shao.html">
            
                
                    <a href="../chapter1/di-san-jie-ff1a-kai-fa-gong-ju-jie-shao.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.3.</b>
                        
                        第三节：开发工具介绍
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="chapter1/di-liu-jie-ff1a-wxss-yu-fa.html">
            
                
                    <a href="../chapter1/di-liu-jie-ff1a-wxss-yu-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.4.</b>
                        
                        第六节：WXSS语法
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2" data-path="di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo.html">
            
                
                    <a href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.</b>
                        
                        第二章：小程序基础
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.1" data-path="di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-yi-jie-ff1a-kuang-jia-jie-shao.html">
            
                
                    <a href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-yi-jie-ff1a-kuang-jia-jie-shao.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.</b>
                        
                        第一节：项目结构
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2" data-path="di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-er-jie-ff1a-wxml-yu-fa.html">
            
                
                    <a href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-er-jie-ff1a-wxml-yu-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.</b>
                        
                        第二节：配置
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3" data-path="di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-san-jie-ff1a-wxml-yu-fa.html">
            
                
                    <a href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-san-jie-ff1a-wxml-yu-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.</b>
                        
                        第三节：WXML语法
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.4" data-path="di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-si-jie-ff1a-wxss-yu-fa.html">
            
                
                    <a href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-si-jie-ff1a-wxss-yu-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.4.</b>
                        
                        第五节：事件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.5" data-path="di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-liu-jie-ff1a-wxss-yu-fa.html">
            
                
                    <a href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-liu-jie-ff1a-wxss-yu-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.5.</b>
                        
                        第六节：WXSS语法
                    </a>
            
            
        </li>
    
        <li class="chapter active" data-level="2.6" data-path="di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-qi-jie-ff1a-flex-bu-ju.html">
            
                
                    <a href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-qi-jie-ff1a-flex-bu-ju.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.6.</b>
                        
                        第七节：flex布局
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.7" data-path="di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-bajie-ff1a-app-sheng-ming-zhou-qi.html">
            
                
                    <a href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-bajie-ff1a-app-sheng-ming-zhou-qi.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.7.</b>
                        
                        第八节：APP对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8" data-path="di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-jiu-jie-ff1a-page-dui-xiang.html">
            
                
                    <a href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-jiu-jie-ff1a-page-dui-xiang.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.</b>
                        
                        第九节：Page对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.9" data-path="di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-shi-zhang-ff1a-wxs-yu-fa.html">
            
                
                    <a href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-shi-zhang-ff1a-wxs-yu-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.9.</b>
                        
                        第十节：WXS语法
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="3" data-path="di-san-zhang-ff1a-chang-yong-zu-jian.html">
            
                
                    <a href="../di-san-zhang-ff1a-chang-yong-zu-jian.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.</b>
                        
                        第三章：常用组件
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="3.1" data-path="di-san-zhang-ff1a-chang-yong-zu-jian/di-yi-jie-ff1a-shi-tu-rong-qi-zu-jian.html">
            
                
                    <a href="../di-san-zhang-ff1a-chang-yong-zu-jian/di-yi-jie-ff1a-shi-tu-rong-qi-zu-jian.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.1.</b>
                        
                        第一节：scroll-view组件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.2" data-path="di-san-zhang-ff1a-chang-yong-zu-jian/di-er-jieff1a-swiper-zu-jian.html">
            
                
                    <a href="../di-san-zhang-ff1a-chang-yong-zu-jian/di-er-jieff1a-swiper-zu-jian.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.2.</b>
                        
                        第二节：swiper组件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.3" data-path="di-san-zhang-ff1a-chang-yong-zu-jian/di-san-jie-ff1a-movable-view-zu-jian.html">
            
                
                    <a href="../di-san-zhang-ff1a-chang-yong-zu-jian/di-san-jie-ff1a-movable-view-zu-jian.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.3.</b>
                        
                        第三节：movable-view组件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.4" data-path="di-san-zhang-ff1a-chang-yong-zu-jian/di-sijie-ff1a-icon-zu-jian.html">
            
                
                    <a href="../di-san-zhang-ff1a-chang-yong-zu-jian/di-sijie-ff1a-icon-zu-jian.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.4.</b>
                        
                        第四节：icon组件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.5" data-path="di-san-zhang-ff1a-chang-yong-zu-jian/di-wu-jie-ff1a-text-zu-jian.html">
            
                
                    <a href="../di-san-zhang-ff1a-chang-yong-zu-jian/di-wu-jie-ff1a-text-zu-jian.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.5.</b>
                        
                        第五节：text组件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.6" data-path="di-san-zhang-ff1a-chang-yong-zu-jian/di-liu-jie-ff1a-input-zu-jian.html">
            
                
                    <a href="../di-san-zhang-ff1a-chang-yong-zu-jian/di-liu-jie-ff1a-input-zu-jian.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.6.</b>
                        
                        第六节：input组件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.7" data-path="di-san-zhang-ff1a-chang-yong-zu-jian/zi-ding-yi-zu-jian.html">
            
                
                    <a href="../di-san-zhang-ff1a-chang-yong-zu-jian/zi-ding-yi-zu-jian.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.7.</b>
                        
                        自定义组件
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="4" >
            
            <span><b>4.</b> 第四章：小程序API</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="4.1" data-path="di-yi-jie-ff1a-wang-luo-qing-qiu-api.html">
            
                
                    <a href="../di-yi-jie-ff1a-wang-luo-qing-qiu-api.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.1.</b>
                        
                        第一节：网络请求API
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="5" data-path="di-liu-zhang-ff1a-es6-yu-fa.html">
            
                
                    <a href="../di-liu-zhang-ff1a-es6-yu-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>5.</b>
                        
                        第五章：ES6语法
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="5.1" data-path="di-liu-zhang-ff1a-es6-yu-fa/di-yi-jie-ff1a-shi-yao-shi-es6-yu-fa.html">
            
                
                    <a href="../di-liu-zhang-ff1a-es6-yu-fa/di-yi-jie-ff1a-shi-yao-shi-es6-yu-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>5.1.</b>
                        
                        第一节：什么是ES6语法
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="5.2" data-path="di-liu-zhang-ff1a-es6-yu-fa/di-er-jie-ff1a-es6-yu-fa.html">
            
                
                    <a href="../di-liu-zhang-ff1a-es6-yu-fa/di-er-jie-ff1a-es6-yu-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>5.2.</b>
                        
                        第二节：定义变量
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="5.3" data-path="di-liu-zhang-ff1a-es6-yu-fa/di-san-jie-ff1a-han-shu.html">
            
                
                    <a href="../di-liu-zhang-ff1a-es6-yu-fa/di-san-jie-ff1a-han-shu.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>5.3.</b>
                        
                        第三节：函数
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="5.4" data-path="di-liu-zhang-ff1a-es6-yu-fa/di-si-jie-ff1a-lei.html">
            
                
                    <a href="../di-liu-zhang-ff1a-es6-yu-fa/di-si-jie-ff1a-lei.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>5.4.</b>
                        
                        第四节：类
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="5.5" data-path="di-liu-zhang-ff1a-es6-yu-fa/di-wu-jie-ff1a-mo-kuai.html">
            
                
                    <a href="../di-liu-zhang-ff1a-es6-yu-fa/di-wu-jie-ff1a-mo-kuai.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>5.5.</b>
                        
                        第五节：模块
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="6" data-path="di-wu-zhang-ff1a-yun-kai-fa.html">
            
                
                    <a href="../di-wu-zhang-ff1a-yun-kai-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.</b>
                        
                        第六章：云开发
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="6.1" data-path="di-yi-jie-ff1a-shi-yao-shi-yun-kai-fa.html">
            
                
                    <a href="../di-yi-jie-ff1a-shi-yao-shi-yun-kai-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.1.</b>
                        
                        第一节：什么是云开发
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.2" data-path="di-er-jie-ff1a-zhu-ce-wei-xin-xiao-cheng-xu.html">
            
                
                    <a href="../di-er-jie-ff1a-zhu-ce-wei-xin-xiao-cheng-xu.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.2.</b>
                        
                        第二节：注册微信小程序
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.3" data-path="di-san-jie-ff1a-kai-tong-yun-kai-fa.html">
            
                
                    <a href="../di-san-jie-ff1a-kai-tong-yun-kai-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.3.</b>
                        
                        第三节：开通云开发
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.4" data-path="di-si-jie-ff1a-shu-ju-ku.html">
            
                
                    <a href="../di-si-jie-ff1a-shu-ju-ku.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.4.</b>
                        
                        第四节：数据库准备
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.5" data-path="di-wu-jie-ff1a-shu-ju-ku-cao-zuo.html">
            
                
                    <a href="../di-wu-jie-ff1a-shu-ju-ku-cao-zuo.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.5.</b>
                        
                        第五节：数据库操作
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.6" data-path="di-liu-jie-ff1a-command-zhi-ling.html">
            
                
                    <a href="../di-liu-jie-ff1a-command-zhi-ling.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.6.</b>
                        
                        第六节：command指令
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.7" data-path="di-qi-jie-ff1a-gao-ji-cha-xun.html">
            
                
                    <a href="../di-qi-jie-ff1a-gao-ji-cha-xun.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.7.</b>
                        
                        第七节：高级查询
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.8" data-path="di-ba-jie-ff1a-wen-jian-shang-chuan.html">
            
                
                    <a href="../di-ba-jie-ff1a-wen-jian-shang-chuan.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.8.</b>
                        
                        第八节：文件操作
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.9" data-path="di-jiu-jie-ff1a-node-huan-jing-da-jian.html">
            
                
                    <a href="../di-jiu-jie-ff1a-node-huan-jing-da-jian.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.9.</b>
                        
                        第九节：node环境搭建
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.10" data-path="di-shi-jie-ff1a-yun-han-shu.html">
            
                
                    <a href="../di-shi-jie-ff1a-yun-han-shu.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.10.</b>
                        
                        第十节：云函数
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.11" data-path="di-shi-yi-jie-ff1a-yun-han-shu-jian-ce-nei-rong-an-quan.html">
            
                
                    <a href="../di-shi-yi-jie-ff1a-yun-han-shu-jian-ce-nei-rong-an-quan.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.11.</b>
                        
                        第十一节：检测内容安全
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.12" data-path="di-shi-er-jie-ff1a-yun-han-shu-tu-pian-jian-huang.html">
            
                
                    <a href="../di-shi-er-jie-ff1a-yun-han-shu-tu-pian-jian-huang.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.12.</b>
                        
                        第十二节：图片鉴黄
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.13" data-path="di-shi-san-jie-ff1a-yong-hu-shou-quan.html">
            
                
                    <a href="../di-shi-san-jie-ff1a-yong-hu-shou-quan.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.13.</b>
                        
                        第十三节：用户授权
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.14" data-path="di-shi-si-jie-ff1a-qi-ta-shou-quan-fang-shi.html">
            
                
                    <a href="../di-shi-si-jie-ff1a-qi-ta-shou-quan-fang-shi.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.14.</b>
                        
                        第十四节：其他授权方式
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    


            
            <li class="divider"></li>
            <li>
                <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                    Published with GitBook
                </a>
            </li>
            
        </ul>
    </nav>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header" role="navigation">
    <!-- Actions Left -->
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../" >微信小程序</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1" role="main">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <h1 id="flex&#x5E03;&#x5C40;&#xFF1A;">flex&#x5E03;&#x5C40;&#xFF1A;</h1>
<p><code>flex</code>&#x5E03;&#x5C40;&#x662F;&#x7EE7;<code>&#x6807;&#x51C6;&#x6D41;&#x5E03;&#x5C40;</code>&#x3001;<code>&#x6D6E;&#x52A8;&#x5E03;&#x5C40;</code>&#x3001;<code>&#x5B9A;&#x4F4D;&#x5E03;&#x5C40;</code>&#x540E;&#x7684;&#x7B2C;&#x56DB;&#x79CD;&#x5E03;&#x5C40;&#x65B9;&#x5F0F;&#x3002;&#x8FD9;&#x79CD;&#x65B9;&#x5F0F;&#x53EF;&#x4EE5;&#x975E;&#x5E38;&#x4F18;&#x96C5;&#x7684;&#x5B9E;&#x73B0;&#x5B50;&#x5143;&#x7D20;&#x5C45;&#x4E2D;&#x6216;&#x5747;&#x5300;&#x5206;&#x5E03;&#xFF0C;&#x751A;&#x81F3;&#x53EF;&#x4EE5;&#x968F;&#x7740;&#x7A97;&#x53E3;&#x7F29;&#x653E;&#x81EA;&#x52A8;&#x9002;&#x5E94;&#x3002;<code>flex</code>&#x5E03;&#x5C40;&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x5B58;&#x5728;&#x4E00;&#x5B9A;&#x7684;&#x517C;&#x5BB9;&#x6027;&#xFF08;&#x5177;&#x4F53;&#x53C2;&#x8003;&#xFF1A;<code>https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7</code>&#xFF09;&#x3002;&#x4F46;&#x662F;&#x5728;&#x5C0F;&#x7A0B;&#x5E8F;&#x4E2D;&#xFF0C;&#x662F;&#x5B8C;&#x5168;&#x517C;&#x5BB9;<code>flex</code>&#x5E03;&#x5C40;&#x7684;&#xFF0C;&#x5E76;&#x4E14;&#x5FAE;&#x4FE1;&#x5B98;&#x65B9;&#x4E5F;&#x662F;&#x63A8;&#x8350;&#x4F7F;&#x7528;<code>flex</code>&#x5E03;&#x5C40;&#x7684;&#x3002;&#x4E0B;&#x9762;&#x5C31;&#x6765;&#x8BE6;&#x7EC6;&#x7684;&#x8BB2;&#x4E0B;<code>flex</code>&#x5E03;&#x5C40;&#x3002;</p>
<h2 id="&#x4E00;&#x4E2A;&#x5C0F;&#x4F8B;&#x5B50;&#xFF1A;">&#x4E00;&#x4E2A;&#x5C0F;&#x4F8B;&#x5B50;&#xFF1A;</h2>
<p>&#x770B;&#x4EE5;&#x4E0B;&#x4EE3;&#x7801;&#xFF1A;</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">view</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&apos;outter&apos;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">view</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&apos;inner&apos;</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-title">view</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">view</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&apos;inner&apos;</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-title">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">view</span>&gt;</span>
</code></pre>
<pre><code class="lang-css"><span class="hljs-class">.outter</span><span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> flex</span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">justify-content</span>:<span class="hljs-value"> space-between</span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">300px</span></span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">200px</span></span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> pink</span></span>;
}</span>

<span class="hljs-class">.outter</span> <span class="hljs-class">.inner</span><span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> gray</span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">100px</span></span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">100px</span></span></span>;
}</span>
</code></pre>
<p>&#x6700;&#x540E;&#x7684;&#x6548;&#x679C;&#x56FE;&#xFF1A;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024142530.png" alt=""></p>
<h2 id="&#x57FA;&#x672C;&#x6982;&#x5FF5;&#xFF1A;">&#x57FA;&#x672C;&#x6982;&#x5FF5;&#xFF1A;</h2>
<p><img src="../assets/flexbox.png" alt="">  </p>
<ol>
<li>&#x5F39;&#x6027;&#x5BB9;&#x5668;&#xFF1A;&#x5305;&#x542B;&#x7740;&#x5F39;&#x6027;&#x9879;&#x76EE;&#x7684;&#x7236;&#x5143;&#x7D20;&#x3002;&#x901A;&#x8FC7;&#x8BBE;&#x7F6E; display &#x5C5E;&#x6027;&#x7684;&#x503C;&#x4E3A; flex &#x6216; inline-flex &#x6765;&#x5B9A;&#x4E49;&#x5F39;&#x6027;&#x5BB9;&#x5668;&#x3002;  </li>
<li>&#x5F39;&#x6027;&#x9879;&#x76EE;(Flex item)&#xFF1A;&#x5F39;&#x6027;&#x5BB9;&#x5668;&#x7684;&#x6BCF;&#x4E2A;&#x5B50;&#x5143;&#x7D20;&#x90FD;&#x79F0;&#x4E3A;&#x5F39;&#x6027;&#x9879;&#x76EE;&#x3002;&#x5F39;&#x6027;&#x5BB9;&#x5668;&#x76F4;&#x63A5;&#x5305;&#x542B;&#x7684;&#x6587;&#x672C;&#x5C06;&#x88AB;&#x5305;&#x8986;&#x6210;&#x533F;&#x540D;&#x5F39;&#x6027;&#x9879;&#x76EE;&#x3002;&#x4E5F;&#x53EF;&#x4EE5;&#x79F0;&#x4E3A;&#x5B50;&#x5BB9;&#x5668;&#x3002;  </li>
<li>&#x8F74;(Axis)&#xFF1A;&#x6BCF;&#x4E2A;&#x5F39;&#x6027;&#x6846;&#x5E03;&#x5C40;&#x5305;&#x542B;&#x4E24;&#x4E2A;&#x8F74;&#x3002;&#x5F39;&#x6027;&#x9879;&#x76EE;&#x6CBF;&#x5176;&#x4F9D;&#x6B21;&#x6392;&#x5217;&#x7684;&#x90A3;&#x6839;&#x8F74;&#x79F0;&#x4E3A;&#x4E3B;&#x8F74;(main axis)&#x3002;&#x5782;&#x76F4;&#x4E8E;&#x4E3B;&#x8F74;&#x7684;&#x90A3;&#x6839;&#x8F74;&#x79F0;&#x4E3A;&#x4FA7;&#x8F74;(cross axis)&#x3002;  </li>
<li>&#x65B9;&#x5411;(Direction)&#xFF1A;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;<code>flex-direction</code>&#x6765;&#x786E;&#x5B9A;&#x4E3B;&#x8F74;&#x548C;&#x4FA7;&#x8F74;&#x7684;&#x65B9;&#x5411;&#x3002;</li>
</ol>
<h2 id="&#x8BBE;&#x7F6E;&#x5728;&#x4E3B;&#x8F74;&#x4E0A;&#x7684;&#x6392;&#x5217;&#x65B9;&#x5F0F;&#xFF1A;">&#x8BBE;&#x7F6E;&#x5728;&#x4E3B;&#x8F74;&#x4E0A;&#x7684;&#x6392;&#x5217;&#x65B9;&#x5F0F;&#xFF1A;</h2>
<p>&#x9ED8;&#x8BA4;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x4E3B;&#x8F74;&#x7684;&#x65B9;&#x5411;&#x662F;&#x4ECE;&#x5DE6;&#x5230;&#x53F3;&#x3002;&#x5728;&#x4E3B;&#x8F74;&#x65B9;&#x5411;&#x4E0A;&#xFF0C;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;<code>justify-content</code>&#x5C5E;&#x6027;&#x6765;&#x8BBE;&#x7F6E;&#x4ED6;&#x4EEC;&#x7684;&#x6392;&#x5217;&#x65B9;&#x5F0F;&#x3002;&#x6392;&#x5217;&#x65B9;&#x5F0F;&#x6709;&#x4EE5;&#x4E0B;&#x51E0;&#x79CD;&#xFF1A;</p>
<ol>
<li><p><code>flex-start</code>&#xFF1A;&#x9879;&#x76EE;&#x9760;&#x8FD1;&#x7236;&#x76D2;&#x5B50;&#x7684;&#x5DE6;&#x4FA7;&#x3002;&#x9ED8;&#x8BA4;&#x91C7;&#x7528;&#x7684;&#x5C31;&#x662F;&#x8FD9;&#x79CD;&#x6392;&#x5217;&#x65B9;&#x5F0F;&#x3002;&#x793A;&#x4F8B;&#x56FE;&#x5982;&#x4E0B;&#xFF1A;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024145113.png" alt=""></p>
</li>
<li><p><code>flex-end</code>&#xFF1A;&#x9879;&#x76EE;&#x9760;&#x8FD1;&#x7236;&#x76D2;&#x5B50;&#x7684;&#x53F3;&#x4FA7;&#x3002;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024145614.png" alt=""></p>
</li>
<li><p><code>center</code>&#xFF1A;&#x6240;&#x6709;&#x9879;&#x76EE;&#x4F1A;&#x6328;&#x5728;&#x4E00;&#x8D77;&#x5728;&#x7236;&#x76D2;&#x5B50;&#x7684;&#x4E2D;&#x95F4;&#x4F4D;&#x7F6E;&#x3002;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024145916.png" alt=""></p>
</li>
<li><p><code>space-around</code>&#xFF1A;&#x9879;&#x76EE;&#x6CBF;&#x4E3B;&#x8F74;&#x5747;&#x5300;&#x5206;&#x5E03;&#xFF0C;&#x4F4D;&#x4E8E;&#x9996;&#x5C3E;&#x4E24;&#x7AEF;&#x7684;&#x5B50;&#x5BB9;&#x5668;&#x5230;&#x7236;&#x5BB9;&#x5668;&#x7684;&#x8DDD;&#x79BB;&#x662F;&#x5B50;&#x5BB9;&#x5668;&#x95F4;&#x8DDD;&#x7684;&#x4E00;&#x534A;&#x3002;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024150032.png" alt=""></p>
</li>
<li><p><code>space-between</code>&#xFF1A;&#x9879;&#x76EE;&#x6CBF;&#x4E3B;&#x8F74;&#x5747;&#x5300;&#x5206;&#x5E03;&#xFF0C;&#x4F4D;&#x4E8E;&#x9996;&#x5C3E;&#x4E24;&#x7AEF;&#x7684;&#x5B50;&#x5BB9;&#x5668;&#x4E0E;&#x7236;&#x5BB9;&#x5668;&#x7D27;&#x7D27;&#x6328;&#x7740;&#x3002;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024150151.png" alt=""></p>
</li>
<li><p><code>space-evenly</code>&#xFF1A;&#x9879;&#x76EE;&#x5728;&#x4E3B;&#x8F74;&#x4E0A;&#x5747;&#x5300;&#x5206;&#x5E03;&#xFF0C;&#x6536;&#x5C3E;&#x4E24;&#x7AEF;&#x7684;&#x81EA;&#x5BB9;&#x5668;&#x5230;&#x7236;&#x5BB9;&#x5668;&#x7684;&#x8DDD;&#x79BB;&#x8DDF;&#x81EA;&#x5BB9;&#x5668;&#x95F4;&#x7684;&#x95F4;&#x8DDD;&#x662F;&#x4E00;&#x6837;&#x7684;&#x3002;<br><img src="../assets/QQ&#x622A;&#x56FE;20181025105128.png" alt=""></p>
</li>
</ol>
<h2 id="&#x8BBE;&#x7F6E;&#x5728;&#x4FA7;&#x8F74;&#x4E0A;&#x7684;&#x6392;&#x5217;&#x65B9;&#x5F0F;&#xFF1A;">&#x8BBE;&#x7F6E;&#x5728;&#x4FA7;&#x8F74;&#x4E0A;&#x7684;&#x6392;&#x5217;&#x65B9;&#x5F0F;&#xFF1A;</h2>
<p>&#x9ED8;&#x8BA4;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x4FA7;&#x8F74;&#x7684;&#x65B9;&#x5411;&#x662F;&#x4ECE;&#x4E0A;&#x5230;&#x4E0B;&#x3002;&#x5728;&#x4FA7;&#x8F74;&#x65B9;&#x5411;&#x4E0A;&#xFF0C;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;<code>align-items</code>&#x5C5E;&#x6027;&#x6765;&#x8BBE;&#x7F6E;&#x4ED6;&#x4EEC;&#x7684;&#x6392;&#x5217;&#x65B9;&#x5F0F;&#x3002;&#x6392;&#x5217;&#x65B9;&#x5F0F;&#x6709;&#x4EE5;&#x4E0B;&#x51E0;&#x79CD;&#xFF1A;</p>
<ol>
<li><p><code>flex-start</code>&#xFF1A;&#x8D77;&#x59CB;&#x7AEF;&#x5BF9;&#x9F50;&#x3002;&#x9ED8;&#x8BA4;&#x5C31;&#x662F;&#x8FD9;&#x79CD;&#x5BF9;&#x9F50;&#x65B9;&#x5F0F;&#x3002;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024150838.png" alt=""></p>
</li>
<li><p><code>flex-end</code>&#xFF1A;&#x672B;&#x5C3E;&#x6BB5;&#x5BF9;&#x9F50;&#x3002;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024150938.png" alt=""></p>
</li>
<li><p><code>center</code>&#xFF1A;&#x4E2D;&#x95F4;&#x5BF9;&#x9F50;&#x3002;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024151411.png" alt=""></p>
</li>
<li><p><code>stretch</code>&#xFF1A;&#x5982;&#x679C;&#x9879;&#x76EE;&#x6CA1;&#x6709;&#x8BBE;&#x7F6E;&#x9AD8;&#x5EA6;&#x3002;&#x90A3;&#x4E48;&#x5B50;&#x5BB9;&#x5668;&#x6CBF;&#x4EA4;&#x53C9;&#x8F74;&#x65B9;&#x5411;&#x7684;&#x5C3A;&#x5BF8;&#x62C9;&#x4F38;&#x81F3;&#x4E0E;&#x7236;&#x5BB9;&#x5668;&#x4E00;&#x81F4;&#x3002;&#x6BD4;&#x5982;&#x6211;&#x4EEC;&#x5C06;<code>.inner</code>&#x7684;&#x9AD8;&#x5EA6;&#x5C5E;&#x6027;&#x53BB;&#x6389;&#xFF0C;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre><code class="lang-css"><span class="hljs-class">.outter</span> <span class="hljs-class">.inner</span><span class="hljs-rules">{
 <span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> gray</span></span>;
 <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">100px</span></span></span>;
 <span class="hljs-comment">/* height: 100px; */</span>
 <span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"> <span class="hljs-number">1px</span> solid <span class="hljs-hexcolor">#ccc</span></span></span>;
}</span>
</code></pre>
<p>&#x6548;&#x679C;&#x56FE;&#x4E3A;&#xFF1A;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024153204.png" alt=""></p>
</li>
<li><p><code>baseline</code>&#xFF1A;&#x57FA;&#x7EBF;&#x5BF9;&#x9F50;&#xFF0C;&#x8FD9;&#x91CC;&#x7684; baseline &#x9ED8;&#x8BA4;&#x662F;&#x6307;&#x9996;&#x884C;&#x6587;&#x5B57;&#xFF0C;&#x6240;&#x6709;&#x5B50;&#x5BB9;&#x5668;&#x5411;&#x57FA;&#x7EBF;&#x5BF9;&#x9F50;&#xFF0C;&#x4EA4;&#x53C9;&#x8F74;&#x8D77;&#x70B9;&#x5230;&#x5143;&#x7D20;&#x57FA;&#x7EBF;&#x8DDD;&#x79BB;&#x6700;&#x5927;&#x7684;&#x5B50;&#x5BB9;&#x5668;&#x5C06;&#x4F1A;&#x4E0E;&#x4EA4;&#x53C9;&#x8F74;&#x8D77;&#x59CB;&#x7AEF;&#x76F8;&#x5207;&#x4EE5;&#x786E;&#x5B9A;&#x57FA;&#x7EBF;&#x3002;&#x6BD4;&#x5982;&#x6211;&#x4EEC;&#x628A;&#x4EE3;&#x7801;&#x6539;&#x6210;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">view</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&apos;outter&apos;</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-title">view</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&apos;inner&apos;</span>&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-title">view</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">&apos;margin-top:10px;background:#eee;&apos;</span>&gt;</span>hello<span class="hljs-tag">&lt;/<span class="hljs-title">view</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-title">view</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-title">view</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&apos;inner&apos;</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-title">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">view</span>&gt;</span>
</code></pre>
<p>&#x7136;&#x540E;<code>wxss</code>&#x6587;&#x4EF6;&#x4E3A;&#xFF1A;</p>
<pre><code class="lang-css">.outter{
 display: flex;
 align-items: baseline;
 width: 300px;
 height: 200px;
 background: pink;
}
.outter .inner{...}
</code></pre>
<p>&#x90A3;&#x4E48;&#x6548;&#x679C;&#x56FE;&#x4E3A;&#xFF1A;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024152933.png" alt=""></p>
</li>
</ol>
<h2 id="&#x66F4;&#x6362;&#x4E3B;&#x8F74;&#x548C;&#x4FA7;&#x8F74;&#x65B9;&#x5411;">&#x66F4;&#x6362;&#x4E3B;&#x8F74;&#x548C;&#x4FA7;&#x8F74;&#x65B9;&#x5411;</h2>
<p>&#x4E3B;&#x8F74;&#x9ED8;&#x8BA4;&#x7684;&#x65B9;&#x5411;&#x662F;&#x4ECE;&#x5DE6;&#x5230;&#x53F3;&#xFF0C;&#x4FA7;&#x8F74;&#x7684;&#x65B9;&#x5411;&#x9ED8;&#x8BA4;&#x662F;&#x4ECE;&#x4E0A;&#x5230;&#x4E0B;&#xFF0C;&#x5F53;&#x7136;&#x4E5F;&#x53EF;&#x4EE5;&#x8FDB;&#x884C;&#x4FEE;&#x6539;&#x3002;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;<code>flex-direction</code>&#x8FDB;&#x884C;&#x4FEE;&#x6539;&#x3002;&#x53EF;&#x4EE5;&#x4FEE;&#x6539;&#x7684;&#x53C2;&#x6570;&#x4E3A;&#x4EE5;&#x4E0B;&#xFF1A;</p>
<ol>
<li><p><code>row</code>&#xFF1A;&#x9ED8;&#x8BA4;&#x5C5E;&#x6027;&#x3002;&#x4ECE;&#x5DE6;&#x5230;&#x53F3;&#x3002;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024153859.png" alt=""></p>
</li>
<li><p><code>row-reverse</code>&#xFF1A;&#x4ECE;&#x53F3;&#x5230;&#x5DE6;&#x3002;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024154006.png" alt=""></p>
</li>
<li><p><code>column</code>&#xFF1A;&#x4ECE;&#x4E0A;&#x5230;&#x4E0B;&#x3002;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024154040.png" alt=""></p>
</li>
<li><p><code>column-reverse</code>&#xFF1A;&#x4ECE;&#x4E0B;&#x5230;&#x4E0A;&#x3002;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024154109.png" alt=""></p>
</li>
</ol>
<h2 id="&#x6362;&#x884C;">&#x6362;&#x884C;</h2>
<p>&#x9ED8;&#x8BA4;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x5143;&#x7D20;&#x4E2A;&#x6570;&#x5982;&#x679C;&#x8D85;&#x8FC7;&#x4E00;&#x5B9A;&#x6570;&#x91CF;&#xFF0C;&#x90A3;&#x4E48;&#x5728;&#x4E00;&#x884C;&#x5F53;&#x4E2D;&#x5C31;&#x6392;&#x5217;&#x4E0D;&#x4E0B;&#x3002;&#x6B64;&#x65F6;<code>flex</code>&#x9ED8;&#x8BA4;&#x7684;&#x5904;&#x7406;&#x65B9;&#x5F0F;&#x662F;&#x538B;&#x7F29;&#x5143;&#x7D20;&#xFF0C;&#x4F7F;&#x5176;&#x80FD;&#x5728;&#x4E00;&#x884C;&#x4E2D;&#x6392;&#x5217;&#x4E0B;&#x6765;&#x3002;&#x6BD4;&#x5982;&#x4EE5;&#x4E0B;&#x4EE3;&#x7801;&#xFF1A;</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">view</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&apos;outter&apos;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">view</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&apos;inner&apos;</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-title">view</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">view</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&apos;inner&apos;</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-title">view</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">view</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&apos;inner&apos;</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-title">view</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">view</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&apos;inner&apos;</span>&gt;</span>4<span class="hljs-tag">&lt;/<span class="hljs-title">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">view</span>&gt;</span>
</code></pre>
<pre><code class="lang-wxss">.outter{
  display: flex;
  width: 300px;
  height: 200px;
  background: pink;
}

.outter .inner{
  background: gray;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
}
</code></pre>
<p>&#x90A3;&#x4E48;&#x4F1A;&#x628A;&#x8FD9;&#x56DB;&#x4E2A;&#x5143;&#x7D20;&#x6324;&#x538B;&#x5728;&#x4E00;&#x884C;&#x4E2D;&#x3002;&#x5373;&#x4F7F;&#x7ED9;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x4E86;&#x5BBD;&#x5EA6;&#x4E5F;&#x6CA1;&#x6709;&#x7528;&#x7684;&#x3002;&#x6548;&#x679C;&#x56FE;&#x5982;&#x4E0B;&#xFF1A;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024155726.png" alt=""></p>
<p>&#x53EF;&#x4EE5;&#x901A;&#x8FC7;<code>flex-wrap</code>&#x6765;&#x6539;&#x53D8;&#x6392;&#x5217;&#x7684;&#x65B9;&#x5F0F;&#x3002;&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x7684;&#x5C5E;&#x6027;&#x5982;&#x4E0B;&#xFF1A;</p>
<ol>
<li><p><code>nowrap</code>&#xFF1A;&#x4E0D;&#x6362;&#x884C;&#x3002;&#x9ED8;&#x8BA4;&#x7684;&#x3002;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024155726.png" alt=""></p>
</li>
<li><p><code>wrap</code>&#xFF1A;&#x6362;&#x884C;&#x3002;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024160625.png" alt=""></p>
</li>
<li><p><code>wrap-reverse</code>&#xFF1A;&#x6362;&#x884C;&#xFF0C;&#x4F46;&#x662F;&#x7B2C;&#x4E00;&#x884C;&#x4F1A;&#x5728;&#x4E0B;&#x9762;&#x3002;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024160714.png" alt=""></p>
</li>
</ol>
<h2 id="aligncontent&#x5C5E;&#x6027;">align-content&#x5C5E;&#x6027;</h2>
<p>&#x5728;&#x6392;&#x5217;&#x4E2D;&#xFF0C;&#x5982;&#x679C;&#x6709;&#x591A;&#x884C;&#xFF0C;&#x90A3;&#x4E48;&#x8FD9;&#x4E2A;&#x5C5E;&#x6027;&#x662F;&#x8BBE;&#x7F6E;&#x591A;&#x884C;&#x4E4B;&#x95F4;&#x7684;&#x6392;&#x5217;&#x65B9;&#x5F0F;&#x3002;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;<code>align-content</code>&#x5C5E;&#x6027;&#x6765;&#x786E;&#x5B9A;&#x6392;&#x5217;&#x7684;&#x65B9;&#x5F0F;&#x3002;&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x4EE5;&#x4E0B;&#x503C;&#x3002;</p>
<ol>
<li><p><code>flex-start</code>&#xFF1A;&#x4ECE;&#x4E0A;&#x5F80;&#x4E0B;&#x6392;&#x5217;&#x3002;&#x793A;&#x4F8B;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre><code class="lang-html">.outter{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 300px;
  height: 300px;
  background: pink;
}
</code></pre>
<p><img src="../assets/QQ&#x622A;&#x56FE;20181024163950.png" alt=""></p>
</li>
<li><p><code>flex-end</code>&#xFF1A;&#x672B;&#x5C3E;&#x6BB5;&#x5BF9;&#x9F50;&#x3002;&#x6548;&#x679C;&#x56FE;&#x5982;&#x4E0B;&#xFF1A;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024164942.png" alt=""></p>
</li>
<li><p><code>center</code>&#xFF1A;&#x4E2D;&#x70B9;&#x5BF9;&#x9F50;&#x3002;&#x6548;&#x679C;&#x56FE;&#x5982;&#x4E0B;&#xFF1A;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024165113.png" alt=""></p>
</li>
<li><p><code>space-between</code>&#xFF1A;&#x4E0E;&#x4EA4;&#x53C9;&#x8F74;&#x4E24;&#x7AEF;&#x5BF9;&#x9F50;&#xFF0C;&#x8F74;&#x7EBF;&#x4E4B;&#x95F4;&#x7684;&#x95F4;&#x9694;&#x5E73;&#x5747;&#x5206;&#x5E03;&#x3002;&#x6548;&#x679C;&#x56FE;&#x5982;&#x4E0B;&#xFF1A;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024165214.png" alt=""></p>
</li>
<li><p><code>space-around</code>&#xFF1A;&#x6BCF;&#x6839;&#x8F74;&#x7EBF;&#x4E24;&#x4FA7;&#x7684;&#x95F4;&#x9694;&#x90FD;&#x76F8;&#x7B49;&#x3002;&#x6240;&#x4EE5;&#xFF0C;&#x8F74;&#x7EBF;&#x4E4B;&#x95F4;&#x7684;&#x95F4;&#x9694;&#x6BD4;&#x8F74;&#x7EBF;&#x4E0E;&#x8FB9;&#x6846;&#x7684;&#x95F4;&#x9694;&#x5927;&#x4E00;&#x500D;&#x3002;&#x6548;&#x679C;&#x56FE;&#x5982;&#x4E0B;&#xFF1A;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024165634.png" alt=""></p>
</li>
<li><p><code>stretch</code>&#xFF1A;&#x9ED8;&#x8BA4;&#x65B9;&#x5F0F;&#xFF0C;&#x5982;&#x679C;&#x6CA1;&#x6709;&#x7ED9;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x9AD8;&#x5EA6;&#xFF0C;&#x90A3;&#x4E48;&#x4F1A;&#x5360;&#x6EE1;&#x6574;&#x4E2A;&#x4EA4;&#x53C9;&#x8F74;&#x3002;</p>
<pre><code class="lang-wxss">.outter .inner{
background: gray;
width: 100px;
/* height: 100px; */
border: 1px solid #ccc;
box-sizing: border-box;
}
</code></pre>
<p>&#x6548;&#x679C;&#x56FE;&#x5982;&#x4E0B;&#xFF1A;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024170058.png" alt=""></p>
</li>
</ol>
<h2 id="&#x5143;&#x7D20;&#xFF08;&#x5B50;&#x5BB9;&#x5668;&#xFF09;&#x7684;&#x76F8;&#x5173;&#x5C5E;&#x6027;">&#x5143;&#x7D20;&#xFF08;&#x5B50;&#x5BB9;&#x5668;&#xFF09;&#x7684;&#x76F8;&#x5173;&#x5C5E;&#x6027;</h2>
<h3 id="flexbasis&#xFF1A;">flex-basis&#xFF1A;</h3>
<p>&#x5B9A;&#x4E49;&#x4E86;&#x5728;&#x5206;&#x914D;&#x591A;&#x4F59;&#x7A7A;&#x95F4;&#x4E4B;&#x524D;&#xFF0C;&#x9879;&#x76EE;&#x5360;&#x636E;&#x7684;&#x4E3B;&#x8F74;&#x7A7A;&#x95F4;&#xFF0C;&#x6D4F;&#x89C8;&#x5668;&#x6839;&#x636E;&#x8FD9;&#x4E2A;&#x5C5E;&#x6027;&#xFF0C;&#x8BA1;&#x7B97;&#x4E3B;&#x8F74;&#x662F;&#x5426;&#x6709;&#x591A;&#x4F59;&#x7A7A;&#x95F4;&#x3002;</p>
<pre><code class="lang-css"><span class="hljs-class">.item</span> <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">flex-basis</span>:<span class="hljs-value"> &lt;length&gt; | auto</span></span>;
}</span>
</code></pre>
<p>&#x9ED8;&#x8BA4;&#x503C;&#xFF1A;auto&#xFF0C;&#x5373;&#x9879;&#x76EE;&#x672C;&#x6765;&#x7684;&#x5927;&#x5C0F;, &#x8FD9;&#x65F6;&#x5019; item &#x7684;&#x5BBD;&#x9AD8;&#x53D6;&#x51B3;&#x4E8E; width &#x6216; height &#x7684;&#x503C;&#x3002;</p>
<p>&#x5F53;&#x4E3B;&#x8F74;&#x4E3A;&#x6C34;&#x5E73;&#x65B9;&#x5411;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x5F53;&#x8BBE;&#x7F6E;&#x4E86; flex-basis&#xFF0C;&#x9879;&#x76EE;&#x7684;&#x5BBD;&#x5EA6;&#x8BBE;&#x7F6E;&#x503C;&#x4F1A;&#x5931;&#x6548;&#xFF0C;flex-basis &#x9700;&#x8981;&#x8DDF; flex-grow &#x548C; flex-shrink &#x914D;&#x5408;&#x4F7F;&#x7528;&#x624D;&#x80FD;&#x53D1;&#x6325;&#x6548;&#x679C;&#x3002;</p>
<p>&#x5F53; flex-basis &#x503C;&#x4E3A; 0 &#x65F6;&#xFF0C;&#x662F;&#x628A;&#x8BE5;&#x9879;&#x76EE;&#x89C6;&#x4E3A;&#x96F6;&#x5C3A;&#x5BF8;&#x7684;&#xFF0C;&#x6545;&#x5373;&#x4F7F;&#x58F0;&#x660E;&#x8BE5;&#x5C3A;&#x5BF8;&#x4E3A; 140px&#xFF0C;&#x4E5F;&#x5E76;&#x6CA1;&#x6709;&#x4EC0;&#x4E48;&#x7528;&#x3002;<br>&#x5F53; flex-basis &#x503C;&#x4E3A; auto &#x65F6;&#xFF0C;&#x5219;&#x8DDF;&#x6839;&#x636E;&#x5C3A;&#x5BF8;&#x7684;&#x8BBE;&#x5B9A;&#x503C;(&#x5047;&#x5982;&#x4E3A; 100px)&#xFF0C;&#x5219;&#x8FD9; 100px &#x4E0D;&#x4F1A;&#x7EB3;&#x5165;&#x5269;&#x4F59;&#x7A7A;&#x95F4;&#x3002;</p>
<h3 id="flexgrow&#xFF1A;">flex-grow&#xFF1A;</h3>
<p>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x662F;&#x5426;&#x9700;&#x8981;&#x6269;&#x5927;&#x7684;&#x6BD4;&#x4F8B;&#x3002;&#x9ED8;&#x8BA4;&#x503C;&#x4E3A;0&#xFF0C;&#x5373;&#x5982;&#x679C;&#x5B58;&#x5728;&#x5269;&#x4F59;&#x7A7A;&#x95F4;&#xFF0C;&#x4E5F;&#x4E0D;&#x653E;&#x5927;&#x3002;&#x6BD4;&#x5982;&#x6709;&#x4EE5;&#x4E0B;&#x4EE3;&#x7801;&#xFF1A;</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">view</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&apos;outter&apos;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">view</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&apos;inner inner1&apos;</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-title">view</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">view</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&apos;inner inner2&apos;</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-title">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">view</span>&gt;</span>
</code></pre>
<p>wxss&#x4EE3;&#x7801;&#x4E3A;&#xFF1A;</p>
<pre><code class="lang-css"><span class="hljs-class">.outter</span><span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> flex</span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">300px</span></span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">300px</span></span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">flex-wrap</span>:<span class="hljs-value"> wrap</span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> pink</span></span>;
}</span>

<span class="hljs-class">.outter</span> <span class="hljs-class">.inner</span><span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> gray</span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">100px</span></span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">100px</span></span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"> <span class="hljs-number">1px</span> solid <span class="hljs-hexcolor">#ccc</span></span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">box-sizing</span>:<span class="hljs-value"> border-box</span></span>;
}</span>

<span class="hljs-class">.outter</span> <span class="hljs-class">.inner1</span><span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">flex-grow</span>:<span class="hljs-value"> <span class="hljs-number">2</span></span></span>;
}</span>

<span class="hljs-class">.outter</span> <span class="hljs-class">.inner2</span><span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">flex-grow</span>:<span class="hljs-value"> <span class="hljs-number">1</span></span></span>;
}</span>
</code></pre>
<p>&#x6548;&#x679C;&#x56FE;&#x4E3A;&#xFF1A;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024180136.png" alt=""></p>
<p>&#x56E0;&#x4E3A;&#x4E24;&#x4E2A;&#x5143;&#x7D20;&#x5206;&#x522B;&#x5360;&#x4E86;2&#x4EFD;&#xFF0C;1&#x4EFD;&#xFF0C;&#x6240;&#x4EE5;&#x7B2C;&#x4E00;&#x4E2A;&#x5143;&#x7D20;&#x662F;&#x5360;&#x636E;&#x4E86;&#x6574;&#x4E2A;&#x5BB9;&#x5668;&#x5BBD;&#x5EA6;&#x7684;2/3&#xFF0C;&#x7B2C;&#x4E8C;&#x4E2A;&#x5143;&#x7D20;&#x5360;&#x636E;&#x4E86;&#x6574;&#x4E2A;&#x5BB9;&#x5668;&#x5BBD;&#x5EA6;&#x7684;1/3&#x3002;<br>&#x53E6;&#x5916;&#xFF0C;&#x5982;&#x679C;&#x8BBE;&#x7F6E;<code>flex-grow</code>&#x4E3A;0&#xFF0C;&#x90A3;&#x4E48;&#x4ED6;&#x7684;&#x5BBD;&#x5EA6;&#x5C06;&#x4F1A;&#x4FDD;&#x6301;&#x4E3A;&#x8BBE;&#x7F6E;&#x7684;&#x5BBD;&#x5EA6;&#xFF0C;&#x5982;&#x679C;&#x5BBD;&#x5EA6;&#x6CA1;&#x6709;&#x8BBE;&#x7F6E;&#xFF0C;&#x90A3;&#x4E48;&#x5C06;&#x6839;&#x636E;&#x4ED6;&#x7684;&#x5B50;&#x5143;&#x7D20;&#x6765;&#x4FDD;&#x7559;&#x5BBD;&#x5EA6;&#x3002;&#x5047;&#x5982;&#x4EE3;&#x7801;&#x4E3A;&#xFF1A;</p>
<pre><code class="lang-wxml"><view class="outter">
  <view class="inner inner1">1</view>
  <view class="inner inner2">2</view>
</view>
</code></pre>
<p>wxss&#x4EE3;&#x7801;&#x4E3A;&#xFF1A;</p>
<pre><code class="lang-wxss">.outter .inner1{
  flex-grow: 0;
}

.outter .inner2{
  flex-grow: 1;
}
</code></pre>
<p>&#x6548;&#x679C;&#x56FE;&#x4E3A;&#xFF1A;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024181705.png" alt=""><br>&#x5982;&#x679C;&#x628A;<code>inner1</code>&#x7684;<code>width</code>&#x5220;&#x6389;&#xFF0C;&#x90A3;&#x4E48;&#x6548;&#x679C;&#x56FE;&#x4E3A;&#xFF1A;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024181955.png" alt=""></p>
<h3 id="flexshrink&#x5C5E;&#x6027;&#xFF1A;">flex-shrink&#x5C5E;&#x6027;&#xFF1A;</h3>
<p>&#x5B9A;&#x4E49;&#x4E86;&#x9879;&#x76EE;&#x7684;&#x7F29;&#x5C0F;&#x6BD4;&#x4F8B;&#xFF0C;&#x9ED8;&#x8BA4;&#x4E3A;1&#xFF0C;&#x5373;&#x5982;&#x679C;&#x7A7A;&#x95F4;&#x4E0D;&#x8DB3;&#xFF0C;&#x8BE5;&#x9879;&#x76EE;&#x5C06;&#x7F29;&#x5C0F;&#x3002;&#x6BD4;&#x5982;&#x6709;&#x4EE5;&#x4E0B;&#x4EE3;&#x7801;&#xFF1A;</p>
<pre><code class="lang-wxml"><view class="outter">
  <view class="inner inner1">1</view>
  <view class="inner inner2">2</view>
  <view class="inner">3</view>
  <view class="inner">4</view>
</view>
</code></pre>
<p>wxss&#x7684;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre><code class="lang-wxss">.outter{
  display: flex;
  width: 300px;
  height: 300px;
  background: pink;
}

.outter .inner{
  background: gray;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.outter .inner2{
  flex-shrink: 0;
}
</code></pre>
<p>&#x6548;&#x679C;&#x56FE;&#x4E3A;&#xFF1A;<br><img src="../assets/QQ&#x622A;&#x56FE;20181024182550.png" alt=""><br>&#x56E0;&#x4E3A;&#x7ED9;<code>inner2</code>&#x8BBE;&#x7F6E;&#x4E86;<code>flex-shrink</code>&#x4E3A;0&#xFF0C;&#x6240;&#x4EE5;&#x5373;&#x4F7F;&#x5728;&#x7A7A;&#x95F4;&#x4E0D;&#x591F;&#x7684;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x4ED6;&#x4E5F;&#x4E0D;&#x4F1A;&#x88AB;&#x538B;&#x7F29;&#x3002;</p>
<h3 id="flex&#x5C5E;&#x6027;&#xFF1A;">flex&#x5C5E;&#x6027;&#xFF1A;</h3>
<p>flex&#x5C5E;&#x6027;&#x662F;<code>flex-grow flex-shrink flex-basis</code>&#x4E09;&#x4E2A;&#x5C5E;&#x6027;&#x7684;&#x7B80;&#x5199;&#x3002;&#x5047;&#x8BBE;&#x4EE5;&#x4E0A;&#x4E09;&#x4E2A;&#x5C5E;&#x6027;&#x540C;&#x6837;&#x53D6;&#x9ED8;&#x8BA4;&#x503C;&#xFF0C;&#x5219; <code>flex</code>&#x7684;&#x9ED8;&#x8BA4;&#x503C;&#x662F;<code>0 1 auto</code>&#x3002;</p>
<p>&#x5173;&#x4E8E;<code>flex</code>&#x7684;&#x53D6;&#x503C;&#xFF0C;&#x6709;&#x4EE5;&#x4E0B;&#x51E0;&#x79CD;&#x65B9;&#x5F0F;&#xFF1A;</p>
<ol>
<li><p><code>auto</code>&#xFF1A;&#x7B49;&#x4EF7;&#x4E8E;<code>1 1 auto</code>&#x3002;&#x4E5F;&#x5C31;&#x662F;&#x5141;&#x8BB8;&#x589E;&#x957F;&#xFF0C;&#x5141;&#x8BB8;&#x7F29;&#x5C0F;&#xFF0C;&#x5BBD;&#x5EA6;&#x4E3A;&#x81EA;&#x52A8;&#x3002;</p>
</li>
<li><p><code>none</code>&#xFF1A;&#x7B49;&#x4EF7;&#x4E8E;<code>0 0 auto</code>&#x3002;&#x4E5F;&#x5C31;&#x662F;&#x4E0D;&#x5141;&#x8BB8;&#x589E;&#x957F;&#xFF0C;&#x4E0D;&#x5141;&#x8BB8;&#x7F29;&#x5C0F;&#xFF0C;&#x5BBD;&#x5EA6;&#x4E3A;&#x81EA;&#x52A8;&#x3002;</p>
</li>
<li><p>&#x975E;&#x8D1F;&#x6570;&#x5B57;&#xFF1A;&#x8FD9;&#x4E2A;&#x6570;&#x5B57;&#x8868;&#x793A;&#x7684;&#x662F;<code>flex-grow</code>&#x7684;&#x503C;&#xFF0C;<code>flex-shrink</code>&#x4E3A;1&#xFF0C;&#x8868;&#x793A;&#x5141;&#x8BB8;&#x7F29;&#x5C0F;&#xFF0C;<code>flex-basis</code>&#x4E3A;0%&#x3002;&#x53EF;&#x4EE5;&#x8BA4;&#x4E3A;&#x4ED6;&#x5C31;&#x662F;&#x628A;&#x5269;&#x4F59;&#x7684;&#x7A7A;&#x95F4;&#x8FDB;&#x884C;&#x586B;&#x5145;&#x3002;&#x6BD4;&#x5982;&#x4EE5;&#x4E0B;&#x4EE3;&#x7801;&#x662F;&#x7B49;&#x4EF7;&#x7684;&#xFF1A;</p>
<pre><code class="lang-css">  <span class="hljs-class">.item</span> <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">flex</span>:<span class="hljs-value"> <span class="hljs-number">1</span></span></span>;}</span>
  <span class="hljs-class">.item</span> <span class="hljs-rules">{
      <span class="hljs-rule"><span class="hljs-attribute">flex-grow</span>:<span class="hljs-value"> <span class="hljs-number">1</span></span></span>;
      <span class="hljs-rule"><span class="hljs-attribute">flex-shrink</span>:<span class="hljs-value"> <span class="hljs-number">1</span></span></span>;
      <span class="hljs-rule"><span class="hljs-attribute">flex-basis</span>:<span class="hljs-value"> <span class="hljs-number">0%</span></span></span>;
  }</span>
</code></pre>
</li>
<li><p><code>0</code>&#xFF1A;&#x5BF9;&#x5E94;&#x7684;&#x4E09;&#x4E2A;&#x503C;&#x5206;&#x522B;&#x4E3A;<code>0 1 0%</code>&#x3002;&#x6BD4;&#x5982;&#x4EE5;&#x4E0B;&#x4EE3;&#x7801;&#x662F;&#x7B49;&#x4EF7;&#x7684;&#xFF1A;</p>
<pre><code class="lang-css"><span class="hljs-class">.item</span> <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">flex</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;}</span>
<span class="hljs-class">.item</span> <span class="hljs-rules">{
   <span class="hljs-rule"><span class="hljs-attribute">flex-grow</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;
   <span class="hljs-rule"><span class="hljs-attribute">flex-shrink</span>:<span class="hljs-value"> <span class="hljs-number">1</span></span></span>;
   <span class="hljs-rule"><span class="hljs-attribute">flex-basis</span>:<span class="hljs-value"> <span class="hljs-number">0%</span></span></span>;
}</span>
</code></pre>
</li>
<li><p>&#x957F;&#x5EA6;&#x6216;&#x8005;&#x767E;&#x5206;&#x6BD4;&#xFF1A;&#x5219;&#x8FD9;&#x4E2A;&#x503C;&#x89C6;&#x4E3A;<code>flex-basis</code>&#x7684;&#x503C;&#xFF0C;&#x800C;<code>flex-grow</code>&#x4E3A;1&#xFF0C;<code>flex-shrink</code>&#x4E3A;1&#x3002;&#x6BD4;&#x5982;&#x4EE5;&#x4E0B;&#x4EE3;&#x7801;&#x662F;&#x7B49;&#x4EF7;&#x7684;&#xFF1A;</p>
<pre><code class="lang-css"><span class="hljs-class">.item-1</span> <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">flex</span>:<span class="hljs-value"> <span class="hljs-number">0%</span></span></span>;}</span>
<span class="hljs-class">.item-1</span> <span class="hljs-rules">{
   <span class="hljs-rule"><span class="hljs-attribute">flex-grow</span>:<span class="hljs-value"> <span class="hljs-number">1</span></span></span>;
   <span class="hljs-rule"><span class="hljs-attribute">flex-shrink</span>:<span class="hljs-value"> <span class="hljs-number">1</span></span></span>;
   <span class="hljs-rule"><span class="hljs-attribute">flex-basis</span>:<span class="hljs-value"> <span class="hljs-number">0%</span></span></span>;
}</span>

<span class="hljs-class">.item-2</span> <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">flex</span>:<span class="hljs-value"> <span class="hljs-number">24px</span></span></span>;}</span>
<span class="hljs-class">.item-2</span> <span class="hljs-rules">{
   <span class="hljs-rule"><span class="hljs-attribute">flex-grow</span>:<span class="hljs-value"> <span class="hljs-number">1</span></span></span>;
   <span class="hljs-rule"><span class="hljs-attribute">flex-shrink</span>:<span class="hljs-value"> <span class="hljs-number">1</span></span></span>;
   <span class="hljs-rule"><span class="hljs-attribute">flex-basis</span>:<span class="hljs-value"> <span class="hljs-number">24px</span></span></span>;
}</span>
</code></pre>
</li>
<li><p>&#x4E24;&#x4E2A;&#x975E;&#x8D1F;&#x6570;&#x5B57;&#xFF1A;&#x5206;&#x522B;&#x89C6;&#x4E3A;<code>flex-grow</code>&#x548C;<code>flex-shrink</code>&#x7684;&#x503C;&#xFF0C;<code>flex-basis</code>&#x53D6;<code>0%</code>&#xFF0C;&#x5982;&#x4E0B;&#x662F;&#x7B49;&#x540C;&#x7684;&#xFF1A;</p>
<pre><code class="lang-css"><span class="hljs-class">.item</span> <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">flex</span>:<span class="hljs-value"> <span class="hljs-number">2</span> <span class="hljs-number">3</span></span></span>;}</span>
<span class="hljs-class">.item</span> <span class="hljs-rules">{
   <span class="hljs-rule"><span class="hljs-attribute">flex-grow</span>:<span class="hljs-value"> <span class="hljs-number">2</span></span></span>;
   <span class="hljs-rule"><span class="hljs-attribute">flex-shrink</span>:<span class="hljs-value"> <span class="hljs-number">3</span></span></span>;
   <span class="hljs-rule"><span class="hljs-attribute">flex-basis</span>:<span class="hljs-value"> <span class="hljs-number">0%</span></span></span>;
}</span>
</code></pre>
</li>
<li><p>&#x4E00;&#x4E2A;&#x975E;&#x8D1F;&#x6570;&#x5B57;&#x548C;&#x4E00;&#x4E2A;&#x957F;&#x5EA6;&#x6216;&#x767E;&#x5206;&#x6BD4;&#xFF1A;&#x5219;&#x5206;&#x522B;&#x89C6;&#x4E3A; flex-grow &#x548C; flex-basis &#x7684;&#x503C;&#xFF0C;flex-shrink &#x53D6; 1&#xFF0C;&#x5982;&#x4E0B;&#x662F;&#x7B49;&#x540C;&#x7684;&#xFF1A;</p>
<pre><code class="lang-css"><span class="hljs-class">.item</span> <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">flex</span>:<span class="hljs-value"> <span class="hljs-number">11</span> <span class="hljs-number">32px</span></span></span>;}</span>
<span class="hljs-class">.item</span> <span class="hljs-rules">{
   <span class="hljs-rule"><span class="hljs-attribute">flex-grow</span>:<span class="hljs-value"> <span class="hljs-number">11</span></span></span>;
   <span class="hljs-rule"><span class="hljs-attribute">flex-shrink</span>:<span class="hljs-value"> <span class="hljs-number">1</span></span></span>;
   <span class="hljs-rule"><span class="hljs-attribute">flex-basis</span>:<span class="hljs-value"> <span class="hljs-number">32px</span></span></span>;
}</span>
</code></pre>
</li>
</ol>
<p>&#x66F4;&#x591A;&#x5173;&#x4E8E;flex&#x5E03;&#x5C40;&#x8BF7;&#x53C2;&#x8003;&#xFF1A;  </p>
<ol>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout" target="_blank">https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout</a>  </li>
<li><a href="https://zhuanlan.zhihu.com/p/25303493" target="_blank">https://zhuanlan.zhihu.com/p/25303493</a></li>
</ol>

                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-liu-jie-ff1a-wxss-yu-fa.html" class="navigation navigation-prev " aria-label="Previous page: 第六节：WXSS语法"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-bajie-ff1a-app-sheng-ming-zhou-qi.html" class="navigation navigation-next " aria-label="Next page: 第八节：APP对象"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="../gitbook/app.js"></script>

    
    <script src="../gitbook/plugins/gitbook-plugin-search/lunr.min.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-search/search.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-sharing/buttons.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-fontsettings/buttons.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"highlight":{},"search":{"maxIndexSize":1000000},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2}};
    gitbook.start(config);
});
</script>

        
    </body>
    
</html>
